<!-- 库区设置 - 综合表单页面 -->
<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e"
      @grid-data-change="tableDataChange">
    </ex_super_table_page>

    <el-dialog :close-on-click-modal="false" :title="$tt('label_edit_any', { i18n: true, type: 'label_putaway_rule' })"
      :visible.sync="editVisible" custom-class="dialog_big">

      <el-form :label-width="$globalCss.formLabelWidth_default" :model="editForm" :rules="rules" ref="Form">

        <!-- <div class="flex_row_wrap">
          <el-form-item :label="$tt('策略类型')" prop="tempPlaceId">
            <ex_super_input v-model="editForm.editTempType" type="select" enum="PutawayStrategyEnum"
              :listHandler="tempTypeHander"></ex_super_input>
          </el-form-item>

          <el-form-item label="">
            <el-button @click="clickEditAdd" type="primary">{{ $tt('添加策略类型') }}</el-button>
          </el-form-item>
        </div> -->
        <ex_super_table :data="editForm.dtoList" v-bind="edit_option_table" :max-height="400" ref="editForm" />
      </el-form>
      <span slot="footer" class="dialog_footer">
        <el-button @click="editVisible = false">{{ $tt('label_cancel') }}</el-button>
        <el-button type="primary" @click="submitEdit">{{ $tt('label_submit') }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>

import superTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';
import emitOnFunction from '@/mixin/emit-on-function';
const emitKey = 'wms>inbound>put_strategy'
export default {
  title: 'label_putaway_rule',
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: {},
  data() {
    return {
      selection: [],
      editVisible: false,

      editForm: {
        editTempType: null,
        dtoList: [],
      },

      tableData: [],
      option: {

        actionExtra: [
          {
            label: { _key: 'label_edit_any', i18n: true, type: 'label_putaway_rule' }, attrs: { icon: "el-icon-edit" }, click: () => {
              this.editForm.dtoList = _.cloneDeep(this.tableData)
              this.editVisible = true
              this.$nextTick(() => {
                this.$refs.editForm.setSortable({
                  handle: ".sortable_control_handle",
                  onEnd: (evt) => {
                    this.sortChange(evt.oldIndex, evt.newIndex)
                  },

                })
              })
            }
          },
        ],

        table: {
          url: "/wms-api/base/WmsBasePutawayStrategyRpc/selectAll.json",
          showIndex: false,
          urlDataHandle: this.urlDataHandle,
          attrs: { 'cell-class-name': this.cellClassMethod, autoPage: false, 'row-key': 'code', },
          model: this.init_table_model(),
        },
      },
      edit_option_table: {
        showIndex: false, 'row-key': 'code',
        model: [
          // { key: 'name', label: '策略名称', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'priority', label: 'label_priority', 'width': 100, },
          {
            label: 'label_sort_index', width: 160, render: (h, { row, index, list }) => {
              return (<div class="flex_row_center">
                <div class="sortable_control_handle pd_h2" style="cursor: move">
                  <i class="el-icon-sort" />
                </div>
                <el-button type='text' disabled={(index <= 0)} onClick={e => this.sortChange(index, index - 1)}>
                  上移
                </el-button>
                <el-button type='text' disabled={(index >= list.length - 1)} onClick={e => this.sortChange(index, index + 1)}>
                  下移
                </el-button>
              </div>)
            }
          },
          {
            key: 'code', label: 'label_strategy_type', 'min-width': 150, 'show-overflow-tooltip': true,
            formatter: (r, c, v, i) => this.$enumShow(v, "PutawayStrategyEnum"),
          },

          {
            key: 'remark', label: 'label_remark', 'min-width': 140, render: (h, { row }) => {
              return h('ex_super_input', {
                props: {
                  value: row.remark
                },
                on: { input: e => this.$set(row, 'remark', e) }
              })
            }

          },

          {
            key: 'isDisabled', label: 'label_isEnable', 'min-width': 140, render: (h, { row }) => {
              return h('el-switch', {
                class: "switch_danger_left switch_success_right",
                props: {
                  value: row.isDisabled,
                  'active-text': this.$enumShow('ENABLE', "IsAvailableStatusEnum"),
                  'inactive-text': this.$enumShow('DISABLED', "IsAvailableStatusEnum"),
                  'active-color': this.$globalCss.successColor,
                  'inactive-color': this.$globalCss.dangerColor,
                  'active-value': "N",
                  'inactive-value': "Y",
                },
                on: { change: e => this.$set(row, 'isDisabled', e) }
              })
            }
          },
          // {
          //   type: 'operate', width: 130, operate: [
          //     {
          //       label: "label_remove", class: "button_text_danger",
          //       click: (row, i, list) => {
          //         list.splice(i, 1)
          //         this.sortPriorityRefresh()
          //       }
          //     },
          //   ]
          // }

        ],
      },
      rules: {},

    };
  },
  methods: {
    urlDataHandle(e) {
      return e.data.rows ? e.data.rows.sort((a, b) => Number(a.priority) - Number(b.priority)) : []
    },
    option_table_model() {
      return [
        { key: 'priority', label: 'label_priority', 'width': 100, },

        {
          type: 'expandDesc', 'width': 100,
          expandDesc: {
            ...this.$defaultDescAttrs,
            model: [],
          },
        },
        { key: 'name', label: 'label_strategy_name', 'min-width': 120, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$enumShow(r.code, "PutawayStrategyEnum"), },
        {
          key: 'code', label: 'label_strategy_code', 'min-width': 120, 'show-overflow-tooltip': true,
          // formatter: (r, c, v, i) => this.$enumShow(v, "PutawayStrategyEnum"),
        },



        { key: 'remark', label: 'label_remark', 'width': 130, 'show-overflow-tooltip': true, },


        {
          key: 'isDisabled', label: 'label_isEnable', 'width': 100, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v == 'Y' ? 'DISABLED' : 'ENABLE', "IsAvailableStatusEnum"),
        },
      ]
    },
    cellClassMethod({ row, column, rowIndex, columnIndex }) {

      if (column.property == 'isDisabled') {
        if (row.isDisabled == 'Y') {
          return 'color_danger'
        } else if (row.isDisabled == 'N') {
          return 'color_success'
        }
      }
      return ""
    },
    submitEdit() {
      // this.reload()
      this.$confirm(this.$tt('tip_is_confirm_put_rule'), this.$tt("label_tip"), {
        type: 'warning'
      }).then(() => {
        this.$ajax({
          url: '/wms-api/base/WmsBasePutawayStrategyRpc/saveUpdateBatch.json',
          type: 'json',
          loading: true,
          data: {
            putawayStrategyList: this.editForm.dtoList
          },
          success: (res) => {
            this.$message.success(this.$tt("tip_operate_success"))
            this.editVisible = false
            this.reload()
          },
        })

      }).catch(() => {

      });

    },
    tableDataChange(e) {

      this.tableData = e
    },
    sortChange(oldV, newV) {
      let list = this.editForm.dtoList
      list.splice(newV, 0, list.splice(oldV, 1)[0])
      this.sortPriorityRefresh()
    },
    sortPriorityRefresh() {
      let list = this.editForm.dtoList
      list.forEach((it, i) => {
        this.$set(it, 'priority', i + 1)
      })
    },
    tempTypeHander(list) {
      return list.filter(it => {
        return !this.editForm.dtoList.some(e => e.code == it)
      })
    },
    clickEditAdd() {
      if (this.$clickFast()) return
      if (!this.editForm.editTempType) return this.$message.error("请选择策略类型")
      if (this.editForm.dtoList.some(e => e.code == this.editForm.editTempType)) return this.$message.error("策略类型不能重复")

      this.editForm.dtoList.push({
        code: this.editForm.editTempType,
        name: this.$enumShow(this.editForm.editTempType, 'PutawayStrategyEnum'),
        isDisabled: 'N',
        remark: "",
      })
      this.sortPriorityRefresh()
    },
  }
};

</script>
<style></style>
